<template>
  <div>
    <carousel :autoplaySpeed="autoplaySpeed" :Img="Img"></carousel>
    <div class="wrapper">
      <p class="p1">
        <Icon type="ios-pin"/>
        <span>您现在的位置是:</span><span class="span">论文投稿</span><span> > </span><span class="span">我要投稿</span>
      </p>
    </div>
    <Form :model="object.thesis" class="label" style="margin-bottom: 30px">
      <FormItem class="JournalProfessional" label="投递期刊">
        <p style="font-size: 14px;width: 1000px">{{periodicalName}}</p>
      </FormItem>
      <FormItem class="JournalProfessional" label="中文题目*">
        <Input v-model="object.thesis.cTitle" placeholder="" style="width: 1000px"/>
      </FormItem>
      <FormItem class="JournalProfessional" label="英文题目*">
        <Input v-model="object.thesis.eTitle" placeholder="" style="width: 1000px"/>
      </FormItem>
      <FormItem class="JournalProfessional" label="基金项目类型">
        <Input v-model="object.thesis.fundType" placeholder="" style="width: 1000px"/>
      </FormItem>
      <FormItem class="JournalProfessional" label="基金项目编号">
        <Input v-model="object.thesis.fundId" placeholder="" style="width: 1000px"/>
      </FormItem>
      <FormItem class="JournalProfessional" label="中文摘要*">
        <Input v-model="object.thesis.cAbstract" placeholder="" style="width: 1000px"/>
      </FormItem>
      <FormItem class="JournalProfessional" label="中文关键词*">
        <Input v-model="object.thesis.cKeys" placeholder="" style="width: 1000px"/>
      </FormItem>
      <FormItem class="JournalProfessional" label="英文摘要">
        <Input v-model="object.thesis.eAbstract" placeholder="" style="width: 1000px"/>
      </FormItem>
      <div class="label" style="margin-bottom: 30px">
        <FormItem>
          <Row>
            <i-col span="1">
              <Icon type="md-add" size="25" @click="add"/>
            </i-col>
            <i-col span="23">
              <ul>
                <li style="margin-bottom: 20px" v-for="(authors,index) in object.authors">
                  <Row>
                    <i-col span="23">
                      <div style="border: 1px solid #ccc;padding: 5px 10px">
                        <Row :gutter="16" style="padding: 10px 0">
                          <i-col span="9">
                            <p>
                              <span style="display: inline-block;width: 50px;font-size: 15px">姓名:</span>
                              <Input placeholder="" v-model="authors.name" style="width: 300px"/>
                            </p>
                          </i-col>
                          <i-col span="13">
                            <p>
                              <span style="display: inline-block;width: 50px;font-size: 15px">单位:</span>
                              <Input placeholder="" v-model="authors.unit" style="width: 400px"/>
                            </p>
                          </i-col>
                        </Row>
                        <Row style="padding: 10px 0">
                          <i-col span="9">
                            <Checkbox v-model="authors.isFirstAuthor">第一作者</Checkbox>
                            <Checkbox v-model="authors.isCorrespondingAuthor">通讯作者</Checkbox>
                          </i-col>
                        </Row>
                        <div v-if="authors.isFirstAuthor ==true">
                          <Row :gutter="16" style="padding: 10px 0">
                            <i-col :span="6" class="linkage">
                              <p>
                                <span style="display: inline-block;width: 30px;font-size: 15px">省:</span>
                                <Select v-model="authors.province" filterable style="width:200px"
                                        placeholder="请输入省/直辖市">
                                  <Option v-for="item in provinceList" :value="item.value" :key="item.value">{{
                                    item.label}}
                                  </Option>
                                </Select>
                              </p>
                            </i-col>
                            <i-col :span="6">
                              <p>
                                <span style="display: inline-block;width: 30px;font-size: 15px">市:</span>
                                <Select v-model="authors.city" filterable style="width:200px" placeholder="请输入市">
                                  <Option v-for="item in cityList.filter(item => item.parent === authors.province)"
                                          :value="item.value" :key="item.value">{{ item.label}}
                                  </Option>
                                </Select>
                              </p>
                            </i-col>
                            <i-col :span="12">
                              <p>
                                <span style="display: inline-block;width: 50px;font-size: 15px">地址:</span>
                                <Input placeholder="" v-model="authors.addr" style="width: 400px"/>
                              </p>
                            </i-col>
                          </Row>
                          <Row :gutter="16" style="padding: 10px 0">
                            <i-col :span="8">
                              <p>
                                <span style="display: inline-block;width: 50px;font-size: 15px">手机:</span>
                                <Input placeholder="" v-model="authors.phone" style="width: 200px"/>
                              </p>
                            </i-col>
                            <i-col :span="8">
                              <p>
                                <span style="display: inline-block;width: 50px;font-size: 15px">邮箱:</span>
                                <Input type="email" placeholder="" v-model="authors.mail" style="width: 200px"/>
                              </p>
                            </i-col>
                          </Row>
                        </div>
                      </div>
                    </i-col>
                    <i-col span="1">
                      <Icon type="md-close" size="25" @click="close(authors,index)"/>
                    </i-col>
                  </Row>
                </li>
              </ul>
            </i-col>
          </Row>
        </FormItem>
        <FormItem>
          <input type="file" @change="tirggerFile($event)">
        </FormItem>
        <FormItem>
          <p>
            <Checkbox v-model="single" size="default">我同意《版权转让协议》、《平台服务协议》我承诺并无一稿多投</Checkbox>
          </p>
        </FormItem>
        <FormItem>
          <div style="text-align: center">
            <Button type="primary" @click="submit()">确定投稿</Button>
          </div>
        </FormItem>
      </div>
    </Form>
  </div>
</template>

<script>
  import carousel from '../module/carousel'

  export default {
    components: {
      carousel
    },
    data() {
      return {
        autoplaySpeed: 100000,
        Img: [
          {
            id: 1,
            imageLocation: require('../../assets/img/u69.jpg'),
            state: true,
            uri: "",
          },
        ],
        /*我要详细内容*/
        periodicalName: '',
        single: true,
        object: {
          thesis: {
            cTitle: "",
            eTitle: "",
            cAbstract: "",
            eAbstract: "",
            cKeys: "",
            eKeys: "",
            fundType: "",
            fundId: "",
            uri: "",
            createUser: this.createUser
          },
          authors: [
            {
              num: 0,
              tid: "",
              name: "",
              phone: "",
              mail: "",
              unit: "",
              addr: "",
              province: "",
              city: "",
              isFirstAuthor: false,
              isCorrespondingAuthor: false,
              createUser: this.createUser,
            },
          ],
          thesisDelivery: {
            tid: "",
            pid: "",
            taid: "",
            uid: "",
            createUser: this.createUser
          },
          /*上传*/
          file: '',
        },
        /*省*/
        provinceList: [
          {
            value: '北京市',
            label: '北京市'
          },
          {
            value: '河北省',
            label: '河北省'
          },
        ],
        /*市*/
        cityList: [
          {
            value: '北京市',
            label: '北京市',
            parent: '北京市'
          },
          {
            value: '石家庄市',
            label: '石家庄市',
            parent: '河北省'
          },
        ],
        index: 1,
        query: '',
        createUser: '',
      }
    },
    created() {
      this.query = this.$route.query;
      this.object.authors[0].tid = this.$route.query.thesisId
    },
    mounted() {
      this.createUser = localStorage.getItem('ms_userid');
      this.dataArray();
    },
    methods: {
      dataArray() {
        if (this.query.id || this.query.pid) {
          if (this.query.id) {
            this.$axios.get(this.$api.url + '/periodicals/name/' + this.query.id).then((res) => {
              this.periodicalName = res.data;
            });
          } else {
            this.$axios.get(this.$api.url + '/periodicals/name/' + this.query.pid).then((res) => {
              this.periodicalName = res.data
            });
            this.$axios.get(this.$api.url + '/thesis/selectParticularsById/' + this.query.thesisId).then((res) => {
              this.object.thesis.cTitle = res.data.cTitle;
              this.object.thesis.eTitle = res.data.eTitle;
              this.object.thesis.fundType = res.data.fundType;
              this.object.thesis.fundId = res.data.fundId;
              this.object.thesis.cAbstract = res.data.cAbstract;
              this.object.thesis.cKeys = res.data.cKeys;
              this.object.thesis.eAbstract = res.data.eAbstract;
              this.object.thesis.eKeys = res.data.eKeys;
            });
          }
        } else {
          this.$router.push('/goodJournals');
        }
      },
      add() {
        this.object.authors.push(
          {
            num: this.index++,
            tid: this.query.id,
            name: "",
            phone: "",
            mail: "",
            unit: "",
            addr: "",
            province: "",
            city: "",
            isFirstAuthor: false,
            isCorrespondingAuthor: false,
            createUser: this.createUser
          },
        )
      },
      close(authors, index) {
        this.object.authors.splice(index, 1)
      },
      submit() {
        if (this.object.thesis.cTitle != '') {
          if (this.object.thesis.eTitle != '') {
            if (this.object.thesis.cAbstract != '') {
              if (this.object.thesis.cKeys != '') {
                const role = localStorage.getItem('ms_userid');
                this.object.thesisDelivery.pid = this.query.pid;
                this.object.thesisDelivery.uid = role;
                this.object.thesisDelivery.tid = this.query.thesisId;
                this.object.thesisDelivery.taid = this.query.thesisAssessmentId;
                this.post()
              } else {
                this.$Message.warning('中文关键词不能为空！');
              }
            } else {
              this.$Message.warning('中文摘要不能为空！');
            }
          } else {
            this.$Message.warning('英文题目不能为空！');
          }
        } else {
          this.$Message.warning('中文题目不能为空！');
        }
      },
      tirggerFile(event) {
        this.object.file = event.target.files[0];
      },
      post() {
        let _this = this;
        let formData = new FormData();
        formData.append("file", this.object.file);
        formData.append("thesis", JSON.stringify(this.object.thesis));
        formData.append("authors", JSON.stringify(this.object.authors));
        formData.append("thesisDelivery", JSON.stringify(this.object.thesisDelivery));
        let config = {
          headers: {'Content-Type': 'multipart/form-data'}
        };
        this.$axios.post(this.$api.url + '/thesis/delivery/add', formData, config).then(function (res) {
          if (res.data.code == 200) {
            _this.$Message.success('投稿成功！');
            setTimeout(() => {
              _this.$router.go(0);
            }, 1000);
          } else {
            _this.$Message.warning('投稿失败！');
          }
        })
      },
    },
  }
</script>

<style scoped>
  ul li {
    list-style: none
  }

  .wrapper {
    padding: 10px 20px;
  }

  .wrapper .p1 {
    padding: 10px 0;
    font-size: 14px;
    font-weight: bold;
    border-bottom: 1px solid #ccc;
  }

  .wrapper .p1 .span {
    padding: 0 20px;
  }

  .label {
    border: 1px solid #ccc;
    margin: 0 auto;
    padding: 10px 20px;
  }

  .label > .ivu-row {
    padding: 5px 0;
  }
</style>
<style>
  .JournalProfessional .ivu-form-item-label {
    font-size: 17px;
    font-weight: bold;
    width: 125px;
  }
</style>
